<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title>销售管理</title>
</head>
<body>
    <div layout:fragment="title">销售管理</div>
    
    <div layout:fragment="content">
        <!-- 顶部操作栏 -->
        <div class="row mb-3">
            <!-- 日期筛选 -->
            <div class="col-md-8">
                <form th:action="@{/sales}" method="get" class="row g-3">
                    <div class="col-auto">
                        <label for="startDate" class="col-form-label">开始日期</label>
                    </div>
                    <div class="col-auto">
                        <input type="date" class="form-control" id="startDate" name="startDate" th:value="${startDate}">
                    </div>
                    <div class="col-auto">
                        <label for="endDate" class="col-form-label">结束日期</label>
                    </div>
                    <div class="col-auto">
                        <input type="date" class="form-control" id="endDate" name="endDate" th:value="${endDate}">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary">筛选</button>
                    </div>
                    <div class="col-auto" th:if="${startDate != null || endDate != null}">
                        <a th:href="@{/sales}" class="btn btn-outline-secondary">重置</a>
                    </div>
                </form>
            </div>
            <!-- 添加销售按钮 -->
            <div class="col-md-4 text-end">
                <div class="btn-group">
                    <a th:href="@{/sales/add}" class="btn btn-success">
                        <i class="bi bi-plus-circle"></i> 添加销售记录
                    </a>
                    <a th:href="@{/sales/top-selling}" class="btn btn-info">
                        <i class="bi bi-graph-up"></i> 热销商品
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 统计信息卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">总销售金额</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${#numbers.formatDecimal(totalAmount, 1, 2) + ' 元'}">0.00 元</div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-cash-stack fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">总利润</div>
                                <div class="h5 mb-0 font-weight-bold text-success" th:text="${#numbers.formatDecimal(totalProfit, 1, 2) + ' 元'}">0.00 元</div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-graph-up-arrow fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" th:if="${startDate != null || endDate != null}">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">筛选时间范围</div>
                                <div class="h6 mb-0 font-weight-bold text-gray-800">
                                    <span th:text="${startDate != null ? startDate : '不限'}">开始日期</span>
                                    至
                                    <span th:text="${endDate != null ? endDate : '当前'}">结束日期</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-calendar-range fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 销售记录列表 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">销售记录列表</h6>
                <div class="dropdown no-arrow">
                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="bi bi-three-dots-vertical text-gray-400"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                        <div class="dropdown-header">操作:</div>
                        <a class="dropdown-item" href="#" onclick="printTable()">
                            <i class="bi bi-printer me-2"></i>打印记录
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="salesTable" width="100%" cellspacing="0">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>商品名称</th>
                                <th>数量</th>
                                <th>单价(元)</th>
                                <th>总价(元)</th>
                                <th>利润(元)</th>
                                <th>客户</th>
                                <th>支付方式</th>
                                <th>销售日期</th>
                                <th>操作员</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${#lists.isEmpty(sales)}">
                                <td colspan="11" class="text-center">暂无销售记录</td>
                            </tr>
                            <tr th:each="sale : ${sales}">
                                <td th:text="${sale.id}">1</td>
                                <td>
                                    <a th:href="@{'/products/detail/' + ${sale.product.id}}" 
                                       th:text="${sale.product.name}" 
                                       class="text-decoration-none">商品名称</a>
                                </td>
                                <td th:text="${sale.quantity + ' ' + sale.product.unit}">10 个</td>
                                <td th:text="${#numbers.formatDecimal(sale.price, 1, 2)}">20.00</td>
                                <td th:text="${#numbers.formatDecimal(sale.totalAmount, 1, 2)}">200.00</td>
                                <td>
                                    <span th:text="${#numbers.formatDecimal(sale.profit, 1, 2)}" 
                                          th:class="${sale.profit > 0 ? 'text-success' : 'text-danger'}">
                                        50.00
                                    </span>
                                </td>
                                <td th:text="${sale.customer ?: '-'}">客户</td>
                                <td th:text="${sale.paymentType}">现金</td>
                                <td th:text="${#temporals.format(sale.saleDate, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                                <td th:text="${sale.user.username}">操作员</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a th:href="@{'/sales/detail/' + ${sale.id}}" class="btn btn-info" title="详情">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <button class="btn btn-danger" title="删除" 
                                               th:attr="onclick='confirmDelete(\'' + ${sale.id} + '\',\'' + ${sale.product.name} + '\',\'' + ${sale.quantity} + '\')'">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 删除确认模态框 -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除该销售记录吗？</p>
                        <p>商品：<span id="productName"></span></p>
                        <p>数量：<span id="quantity"></span></p>
                        <div class="alert alert-warning" role="alert">
                            <i class="bi bi-exclamation-triangle-fill"></i> 注意：删除此记录将会增加相应商品的库存数量！此操作无法撤销。
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">确认删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script>
            // 确认删除
            function confirmDelete(id, productName, quantity) {
                document.getElementById('productName').textContent = productName;
                document.getElementById('quantity').textContent = quantity;
                document.getElementById('confirmDeleteBtn').href = '/inventory/sales/delete/' + id;
                var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
            }
            
            // 打印表格
            function printTable() {
                var printContents = document.getElementById('salesTable').outerHTML;
                var originalContents = document.body.innerHTML;
                
                // 创建打印样式
                var printStyles = '<style>' +
                    'table { width: 100%; border-collapse: collapse; }' +
                    'th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }' +
                    'th { background-color: #f2f2f2; }' +
                    '.no-print { display: none; }' +
                    '</style>';
                
                document.body.innerHTML = printStyles + '<h2>销售记录</h2>' + printContents;
                window.print();
                document.body.innerHTML = originalContents;
            }
            
            // 日期选择器联动
            document.addEventListener('DOMContentLoaded', function() {
                const startDateInput = document.getElementById('startDate');
                const endDateInput = document.getElementById('endDate');
                
                if (startDateInput && endDateInput) {
                    startDateInput.addEventListener('change', function() {
                        if (endDateInput.value && this.value > endDateInput.value) {
                            endDateInput.value = this.value;
                        }
                    });
                    
                    endDateInput.addEventListener('change', function() {
                        if (startDateInput.value && this.value < startDateInput.value) {
                            startDateInput.value = this.value;
                        }
                    });
                }
            });
        </script>
    </div>
</body>
</html> 